<template >
  <card type="user">
    <div class="author">
      <div class="block block-one"></div>
      <div class="block block-two"></div>
      <div class="block block-three"></div>
      <div class="block block-four"></div>
        <img class="avatar" :src="user.avatar">
        <h5 class="title">{{ user.username }}</h5>
      <p class="description">
        {{ user.role }}
      </p>
    </div>
    <p class="card-description">
      With the earth and the sky and the water,
      remade, like a casket of gold
      For my dreams of your image that blossoms
      a rose in the deeps of my heart.
    </p>
    <p>For My NingNing</p>
    <div slot="footer" class="button-container">

      <el-button type="info" circle>
        <a :href="user.github">
          <img src="../../assets/img/github.png">
        </a>
      </el-button>

      <el-button type="danger" circle>
        <a :href="user.gitee">
          <img src="../../assets/img/gitee.png">
        </a>
      </el-button>

      <el-button type="warning" circle>
        <a :href="user.leetcode">
          <img src="../../assets/img/leetcode.png">
        </a>
      </el-button>

    </div>
  </card>
</template>
<script>
import {
  Card
} from "@/components/index";

export default {
  components: {
    Card
  },
  props: {
    user: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
  }
}
</script>
<style>
</style>
